<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Crea tu primera aplicación - Teléfono (Parte 1)
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c4 {border-width:0}
    div.c3 {text-align: center;}
    img.c2 {padding-top: 10px; padding-right: 10px;}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/setup/index.html">Configuración</a> &gt; Crea tu primera aplicación con el teléfono (Parte 1)
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Crea tu primera aplicación con un teléfono Android (Parte 1): HelloPurr
              </h1><img align="right" alt="" class="c2" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/HelloPurrPart1PhoneImage.png" width="128">
              <p>
                Esta página te ayudará a empezar la construcción de tu primera aplicación: Una imagen de un gatito que maúlla cuando lo acaricias. Puedes ver también  <a href="http://www.youtube.com/watch?v=nC_x9iOby0g">un vídeo</a> (http://www.youtube.com/watch?v=nC_x9iOby0g) de esta aplicación siendo construida. Cuando hayas terminado la construcción de HelloPurr, estarás listo para diseñar y construir aplicaciones por tu cuenta. Antes de empezar, asegúrate de haber <a href="../../../learn/setup/index.html">configurado tu equipo</a>.
              </p>A medida que construyes HelloPurr, aprenderás a usar las tres herramientas fundamentales de trabajo de App Inventor:
              <ul>
                <li>El <b>Diseñador</b>, el lugar donde diseñas tu aplicación. Se ejecuta en el navegador web.
                </li>
                <li>El <b>Editor de bloques</b>, el lugar donde se configura el comportamiento de la aplicación. Es una aplicación independiente con su propia ventana.
                </li>
                <li>El <b>teléfono</b>, conectado a tu ordenador mediante un cable USB.
                </li>
              </ul>
              <p>
                Para construir HelloPurr necesitarás una imagen del gatito y un sonido miau. Descarga estos archivos a tu computadora:
              </p>
              <ul>
                <li>
                  <a href="../../tutorials/hellopurr/HelloPurrAssets/kitty.png">foto del gatito</a>
                </li>
                <li>
                  <a href="../../tutorials/hellopurr/HelloPurrAssets/meow.mp3">sonido miau </a>
                </li>
              </ul>
              <h2>
                Inicia el diseñador y crea un nuevo proyecto
              </h2>
              <p>
                En el navegador web, ve a la página web de App Inventor en <a href="http://appinventor.googlelabs.com">http://appinventor.googlelabs.com</a>. Si esta es la primera vez que usas App Inventor, verás la <em>Página de proyectos</em> vacía, sin proyectos en ella todavía. Debe tener este aspecto:
              </p>
              <div class="c3">
                <img alt="" height="408" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/projects.png" width="620">
              </div>
              <h4>
                Crea un nuevo proyecto
              </h4>
              <ol>
                <li>Haz clic en <span class="ButtonText">Nuevo</span> en el lado izquierdo, cerca de la parte superior de la página.
                </li>
                <li>Introduce el nombre del proyecto HelloPurr (una sola palabra, sin espacios) en el cuadro de diálogo que aparece, haz clic en Aceptar.
                </li>
              </ol>
              <p>
                En el navegador se abrirá el <em>Diseñador</em>, el lugar donde se seleccionan los <em>componentes</em> para tu aplicación, y debe tener este aspecto:
              </p>
              <div class="c3">
                <img alt="" height="408" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/designer.png" width="620">
              </div>
              <h2>
                Selecciona los componentes para el diseño de tu aplicación
              </h2>
              <p>
                Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño, bajo la etiqueta <b>Paleta</b>. (paleta). Los componentes son los elementos básicos que se usan para crear las aplicaciones para el teléfono Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente <em>Label</em> que sólo muestra un texto en la pantalla, o el componente <em>Button</em> (Botón), que se toca para iniciar una acción. Otros componentes son más elaborados: un <em>Lienzo de dibujo</em> (Canvas) que puede almacenar imágenes fijas o animaciones, un sensor <em>Acelerómetro</em> (de movimiento) que funciona como un mando de Wii y detecta si se mueve o agita el teléfono, componentes que crean o envían mensajes de texto, componentes para reproducir música y video, componentes para obtener información de sitios web, y mas aún.
              </p>
              <p>
                Para utilizar un componente en tu aplicación, tendrás que hacer clic y arrastrarlo sobre el visor en el centro del Diseñador. Cuando se añade un componente al visor, también aparece en la lista de componentes al lado derecho del visor.
              </p>
              <p>
                Los componentes tienen propiedades que se pueden ajustar para cambiar la forma en que el componente aparece dentro de la aplicación. Para ver y cambiar las propiedades de un componente, primero debes seleccionar el componente deseado en la lista de componentes.
              </p>
              <h4>
                Pasos a seguir para seleccionar los componentes y ajustar las propiedades
              </h4>
              <p>
                Queremos que HelloPurr tenga un componente <b>Botón</b> con la propiedad imagen ajustada al archivo kitty.png que has descargado antes. Para establecer esto:
              </p>
              <ol>
                <li>Arrastra y suelta el componente <span class="ButtonText">Botón</span> a <b>Screen1</b>. El componente <span class="ButtonText">Botón</span> se encuentra en la sección Básicos de la <b>Paleta</b>.
                </li>
                <li>En la lista de propiedades, bajo Imagen, haz clic en <b>none...</b>(ninguno).
                </li>
                <li>Haz clic en <span class="ButtonText">Add…</span>(agregar).
                </li>
                <li>Selecciona el archivo kitty.png que has descargado antes.
                </li>
                <li>Elimina el texto para <i>Button1</i> que aparece bajo la propiedad <b>Text</b> usando la tecla de retroceso.
                </li>
              </ol>Tu diseñador debería tener este aspecto:
              <div class="c3">
                <img alt="" height="408" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/designerwithkittybutton.png" width="620">
              </div>
              <h2>
                Abre el Editor de bloques, y conecta el teléfono
              </h2>
              <p>
                El diseñador es una de las tres herramientas clave que utilizarás en la creación de tus aplicaciones. La segunda es el Editor de bloques. La tercera es el teléfono. Vamos a usar el <em>Editor de bloques</em> para asignar los comportamientos de tus componentes, como lo que debe suceder cuando el usuario de tu aplicación pulse un botón.
              </p>El Editor de bloques se ejecuta en una ventana seprada. Al hacer clic en <span class="ButtonText">Abrir el editor de bloques</span> de la ventana del diseñador, el archivo del programa Editor de bloques se debe descargar y ejecutar. Este proceso puede tardar 30 segundos o más. Si no se abre el Editor de bloques, podría ser porque tu navegador no está configurado para ejecutar aplicaciones Java descargadas de forma automática. En este caso, busca el archivo descargado llamado AppInventorForAndroidCodeblocks.jnlp y ábrelo. La ventana del editor de bloques debe verse como se muestra abajo, con "cajones" para los bloques de programa a la izquierda, y un gran "lienzo" vacío de espacio para la colocación de bloques para armar el programa, lo que vas a hacer a continuación.
              <div class="c3">
                <img alt="" height="360" src="../../../learn/tutorials/hellopurr/HelloPurrAssets/blockseditorhellopurr.png" width="620">
              </div>
              <p>
                Antes de continuar la construcción de la aplicación, tendrás que conectar el teléfono. Asegúrate de que ya has <a href="../../../learn/setup/phone.html">configurado tu teléfono</a>. Ahora conecta tu teléfono a la computadora mediante un cable USB, y haz clic en <span class="ButtonText">Conectar a dispositivo...</span> en la parte superior de la ventana del editor de bloques. Verás una lista desplegable con el teléfono en la lista, identificado por su tipo de modelo (por ejemplo, HT99TP800054). Haz clic en el. Verás una flecha amarilla animada moverse adelante y atrás, indicando que App Inventor se está conectando al teléfono. La creación de esta conexión puede tomar un minuto o dos. Cuando termina, la flecha dejará de moverse y se tendrá color verde, y si nos fijamos en la pantalla del teléfono, verás allí al gatito - este es el comienzo de tu aplicación!
              </p>
              <h2>
                Próximos pasos
              </h2>
              <p>
                Ahora que el diseñador, el editor de bloques, y el teléfono están conectados, puedes <a href="hellopurrpart2.html">Completar la aplicación HelloPurr</a>
              </p>
              <blockquote class="notice">
                ¿Algo no funciona bien? Visita la <a href="../troubleshooting.html">página de solución de problemas</a>, o comprueba el <a href="../../forum/index.html">Foro de usuarios de App Inventor</a> en busca de ayuda.
              </blockquote>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c4" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google se ha modificado<br>
              El trabajo modificado se ha traducido del Ingles al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

